<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--：
        角色：小鸟 背景 地面 管道
        功能：小鸟上下运动 小鸟翅膀 柱子高度变化 柱子移动循环移动
    
                碰撞判断  得分判断  游戏难度控制
        使用技术：面向对象 canvas绘图 定时器
    
        游戏逻辑：1、定时器函数中不断绘制游戏角色
                2、更新角色的位置
                3、判断游戏是否结束
                4、得分
        -->
    <script>
        //背景构造
        class Background {
            constructor(x, y, width, height, img_src) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                let imge = new Image();
                this.img_src = img_src;
                imge.src = img_src;
                this.img = imge;
            }
            draw() {
                ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
            }
        };
        //水管继承
        class Pipe extends Background {
            constructor(sx, sy, swidth, sheight, ...arg) {
                super(...arg)
                this.sx = sx;
                this.sy = sy;
                this.swidth = swidth;
                this.sheight = sheight;
            }
            draw() {
                ctx.drawImage(this.img, this.sx, this.sy, this.swidth, this.sheight, this.x, this.y, this.width, this.height);
            }
        };
        //小鸟继承
        class Bird extends Background{
            constructor(...arg){
                super(...arg); 
            }
            draw(){
                var oImage = new Image();
                oImage.src = this.img_src[birdIndex%3];
                birdIndex++;
                ctx.drawImage(oImage, this.x, this.y, this.width, this.height);
            }
        }
        //全局变量
        let ctx;
        let timer; //定时器  关闭为游戏结束
        let birdIndex = 0;
        let g = 8;  //小鸟下落速度
        let speed = 15 ; //管道速度
        let score = 0; //分数
        let flag = true; //判断小鸟是否通过
        let array = []; 
        var birds_src = ["./images/0.gif","./images/1.gif","./images/2.gif"];
        let dis = 150;//设置管道默认间隙
        //画地面
        let bg = new Background(0,0,400,600,"./images/bg.png");
        let background = new Background(0,550,400,200,"./images/ground.png");
        //画上水管
        let up_pipe = new Pipe(160,488,130,800,350,0,100,200,'./images/pipe.png');
        //画下水管
        //down_y = up_y(200)+间隙(dis高度 150) 
        let down_pipe = new Pipe(10,480,130,800,350,350,100,200,'./images/pipe.png');
        //画小鸟
        let bird = new Bird(100,250,40,40,birds_src);
        array.push(bg);
        array.push(background);
        array.push(up_pipe);
        array.push(down_pipe);
        array.push(bird);

        //判断结束游戏
        let judge = () => {
            //判断碰撞
            if((bird.width+bird.x > up_pipe.x )&&
            (bird.width+bird.x<up_pipe.x+up_pipe.width+bird.width)&&
            ((bird.y < up_pipe.height + up_pipe.y)||
            (bird.y+bird.height > down_pipe.y))
            ){
                clearInterval(timer);            
            }
            //小鸟飞
            bird.y+=g;
            //管道速度
            if(up_pipe.x+up_pipe.width > 0){
                up_pipe.x -= speed;
                down_pipe.x -= speed;
            }else{
                flag =true;
                up_pipe.x = 400;
                down_pipe.x = 400;
                //高度变化
                //总高550，间隙150，管道高度随机总和400
                //上管道 50 - 350;
                up_pipe.height =  Math.random()*300+50;
                down_pipe.y =dis+up_pipe.height;
                down_pipe.height = 550 - down_pipe.y;
                
            }
            //得分
            if(flag && bird.x>=up_pipe.x+up_pipe.width){
                flag = false;
                score++;
            }          
            ctx.fillStyle = 'rgb(255,255,255)';
            ctx.font = '30px Accent';
            ctx.fillText(score, 200, 100)
        }
        let drawall = () =>{
            ctx.clearRect(0, 0, 400, 600);
            //画所有对象
            array.forEach(item =>{
                item.draw();
            })
            //结束游戏
            judge();
        }
        //按键
        let keydown = e =>{
            if(e.keyCode == 32){
                bird.y-= 50;
            }
        }
        //game初始
        let init=()=>{
            ctx = document.getElementById('canvas').getContext('2d');
            //控制游戏
            document.onkeydown = keydown;
            //drawall();
            timer = setInterval(drawall,100);
        }
    </script>
</head>
<body onload = 'init()'>
    <canvas width="400" height="600" style="margin:50px 200px;" id="canvas"></canvas>
</body>
</html>